<style  lang="scss" scoped>
.bg-primary{
  background: #409EFF;
}
.el-icon-circle-close {
  position: absolute;
  right: -12px;
  top: -30px;
  font-size: 12px;
  &.isMobile {
    right: -50px;
    top: -20px;
  }
}

.badgeItem {
  min-width: 20px;
  height: 20px;
  position: absolute;
  right: -12px;
  top: -30px;
  font-size: 12px;
  border-radius: 100%;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  &.isMobile {
    right: -50px;
    top: -20px;
  }
}
</style>
<style scoped>
.systemWrapperImage {
  background: linear-gradient(
    0deg,
    rgba(255, 45, 46, 1) 0%,
    rgba(253, 71, 108, 1) 100%
  );
}
</style>
<template>
  <div style="position: relative;flex:1;" class="padding-top-bottom-20 padding-left-right-10">
    <!--        系统通知-->
    <div
      v-if="item&&item.groupProfile&&item.groupProfile.name===personage_system_group"
      class="item flex-c-c flex  pointer"
    >
      <div class="wrapperImage systemWrapperImage" style="width: 40px;height: 40px;border-radius: 100%;">
        <el-image :src="systemImage" alt="" style="height: 100%;width: 100%;border-radius: 100%;" />
      </div>
      <div class="margin-left-10">系统消息
        <div class="mobilePhone small" />
        <!--                <div class="mobilePhone small color-grey padding-top-5"> {{showLastMessage(item) }}</div>-->
      </div>
      <div>
        <span v-if="unreadCount" class="bg-primary color-white  badgeItem">{{ unreadCount }}</span>
      </div>
    </div>

    <div v-if="item.type==='C2C'" class="item flex-c-c flex  pointer">
      <div class="wrapperImage" style="width: 40px;height: 40px">
        <el-image
          :src="userImage||defaultImage"
          alt=""
          :fit="userImage?'fill':'contain'"
          style="height: 100%;width: 100%;border-radius: 100%;"
        />
      </div>
      <div class="margin-left-10">
        <div class="mobilePhone sub-small text-one-row-overflow" style="width: 160px;"> {{ showNickName(item)
        }}
        </div>
        <div v-if="item.lastMessage.type == 'TIMFaceElem'" class="mobilePhone small color-grey padding-top-5 text-one-row-overflow" style="width: 180px;">
          表情
        </div>
        <div v-else-if="item.lastMessage.type == 'TIMImageElem'" class="mobilePhone small color-grey padding-top-5 text-one-row-overflow" style="width: 180px;">
          图片
        </div>
        <div v-else class="mobilePhone small color-grey padding-top-5 text-one-row-overflow" style="width: 180px;">
          {{ showLastMessage(item) }}
        </div>
      </div>
      <div style="position: relative;">
        <i
          v-if="!unreadCount"
          class="el-icon-circle-close"
          @click.stop="deleteConversation(item)"
        />
        <span v-else class="bg-primary color-white  badgeItem">{{ unreadCount }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { createProp } from '@/tim';
import defaultImage from '@/assets/images/avatar.png'
import systemImage from './systemImage.png';
import myalert from '@/tim/myalert';
import { personage_system_group } from '@/tim/constact';
import { deleteConversation } from '@/tim/imUtils';

export default {
  props: {
    item: createProp(Object)
  },
  data () {
    return {
      systemImage,
      defaultImage,
      personage_system_group: personage_system_group,
    }
  },
  computed: {
    unreadCount () {
      return this.item.unreadCount
    },
    userImage () {
      // var userid = this.item.userID
      // var user = getLoginUser()
      // if (user.id == userid) {
      //   return user.avatar
      // }
      return this.item && this.item.userProfile.avatar
    },
  },

  mounted () {
  },
  methods: {
    async deleteConversation (item) {
      var result = await myalert.confirm('确认删除该对话？')
      if (result && item.conversationID) {
        deleteConversation(item.conversationID)
        deleteConversation(`C2C${item.toAccount}`)
      }
    },
    showNickName (item) {
      // var str = item && item.lastMessage && item.lastMessage.messageForShow
      // var str_ = str.split('··')
      // if (str[0]) return str[0]
      var nick = item.userProfile && item.userProfile.nick
      return nick
    },
    showLastMessage (item) {
      var str = item && item.lastMessage && item.lastMessage.messageForShow
      var str_ = str.split('··')
      if (str_[1]) return str_[1]
    }
  }

}
</script>

